<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
    <style>
     .wrap{
  width:200px;
  height:200px;
  margin:100px auto;
}
div.a{
  width:90px;
  height:6px;
  display:flex;
  position:absolute;
}
div.a div{
  width:50%;
  height:6px;
  border-radius:20px;
}
div.a:nth-child(1){
  transform:rotate(30deg)
}
div.a:nth-child(2){
  transform:rotate(60deg)
}div.a:nth-child(3){
  transform:rotate(90deg)
}
div.a:nth-child(4){
  transform:rotate(120deg)
}
div.a:nth-child(5){
  transform:rotate(150deg)
}
div.a:nth-child(6){
  transform:rotate(180deg)
}
div.a:nth-child(1) div:nth-child(1){
  background-color:violet;
  animation:loading 1.2s linear 0.1s infinite;
}div.a:nth-child(2) div:nth-child(1){  
  background-color:purple;
  animation:loading 1.2s linear 0.2s infinite;
}
div.a:nth-child(3) div:nth-child(1){
  background-color:red;
  animation:loading 1.2s linear 0.3s infinite;
}
div.a:nth-child(4) div:nth-child(1){
  background-color:yellow;
  animation:loading 1.2s linear 0.4s infinite;
}
div.a:nth-child(5) div:nth-child(1){
  background-color:green;
  animation:loading 1.2s linear 0.5s infinite;
}
div.a:nth-child(6) div:nth-child(1){
  background-color:greenyellow;
  animation:loading 1.2s linear 0.6s infinite;
}
div.a:nth-child(1) div:nth-child(2){
  background-color:blue;
  animation:loading 1.2s linear 0.7s infinite;
}
div.a:nth-child(2) div:nth-child(2){
  background-color:skyblue;
  animation:loading 1.2s linear 0.8s infinite;
}
div.a:nth-child(3) div:nth-child(2){
  background-color:orange;
  animation:loading 1.2s linear 0.9s infinite;
}
div.a:nth-child(4) div:nth-child(2){
  background-color:goldenrod;
  animation:loading 1.2s linear 1.0s infinite;
}
div.a:nth-child(5) div:nth-child(2){
  background-color:salmon;
  animation:loading 1.2s linear 1.1s infinite;
}
div.a:nth-child(6) div:nth-child(2){
  background-color:aqua;
  animation:loading 1.2s linear 1.2s infinite;
}
 .contentcircle{
            background-color: white ;
            width: 30px ;
            height: 30px ;
            border-radius: 50%;
            position:relative;
            top:-11px;
            left:30px;
        }
@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}

}
       
    </style>

</head>
<body>

    <div class='wrap'>

        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='a'>
          <div></div>
          <div></div>
        </div>
        <div class='contentcircle'></div>
          </div>
    
</body>
</html>